<template>
    <div style="margin-right: 10px;">
        <!-- <el-button type="primary" @click="dialog = true">新增菜单</el-button> -->
       
        <el-drawer ref="drawerRef" v-model="dialog" title="新增菜单" direction="rtl" class="demo-drawer" :show-close="false" :before-close="handleClose">
            <!-- 自定义头部 -->
            <template #header>
                <div style="display: flex;">
                    <div style="margin-top: 3px;">
                        <el-icon @click="cancelForm" style="margin-right: 10px;font-size: 20px;">
                            <Close />
                        </el-icon>
                    </div>
                    <span class="el-drawer__title" style="font-weight: bold; color: black;">编辑按钮权限</span>
                    <el-button @click="cancelForm">取消</el-button>
                    <el-button type="primary" @click="submitForm(formRef)">确认</el-button>
                </div>
            </template>
            <div class="demo-drawer__content">
                <el-form ref="formRef" :model="dynamicValidateForm" class="demo-dynamic">
                    <el-form-item prop="menu" label="按钮名称" :rules="[
                        {
                            required: true,
                            message: '请输入按钮名称',
                            trigger: 'blur',
                        },

                    ]">
                        <el-input placeholder="请输入按钮名称" v-model="dynamicValidateForm.menu" />
                    </el-form-item>
                    <el-form-item prop="rule" label="权限名称" :rules="[
                        {
                            required: true,
                            message: '请输入权限名称',
                            trigger: 'blur',
                        },

                    ]">
                        <el-input placeholder="请输入权限名称" v-model="dynamicValidateForm.rule" />
                    </el-form-item>
                    <el-form-item prop="manage" label="上级菜单" :rules="[
                        {
                            required: true,
                            message: '请输入路由路劲',
                            trigger: 'blur',
                        },

                    ]">
                       <el-tree :data="data" show-checkbox node-key="id" 
                         :props="defaultProps" @check="add" />
                    </el-form-item>
                </el-form>
                <div class="demo-drawer__footer">
                   

                    <!-- <el-button @click="cancelForm">Cancel</el-button>
                    <el-button type="primary" :loading="loading" @click="onClick">{{
                        loading ? 'Submitting ...' : 'Submit'
                    }}</el-button> -->
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script lang='ts' setup>
import { reactive, ref,onMounted,onUnmounted } from 'vue'
import { ElDrawer, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
const props= defineProps(['record'])
const $emits=defineEmits(['closeModel'])
const formRef = ref<FormInstance>()
const dynamicValidateForm = reactive<{
    rule: string,
    menu: string,
    manage:string,
    
}>({
    menu: '',
    rule: '',
    manage:'',
  
})
dynamicValidateForm.menu=props.record.title
dynamicValidateForm.rule=props.record.permissionName


const dialog = ref(true)
const loading = ref(false)

// const form = reactive({
//     name: '',
//     region: '',
//     date1: '',
//     date2: '',
//     delivery: false,
//     type: [],
//     resource: '',
//     desc: '',
// })



const drawerRef = ref<InstanceType<typeof ElDrawer>>()
const onClick = () => {
    drawerRef.value!.close()
}



const cancelForm = () => {
    loading.value = false
    dialog.value = false
  $emits('closeModel',false)
}
// 提交表单
const submitForm = (formEl: FormInstance | undefined) => {
    console.log(dynamicValidateForm);
    
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            console.log('submit!', dynamicValidateForm)
        } else {
            console.log('error submit!')
            return false
        }
    })
}
// 树
const defaultProps = {
  children: 'children',
  label: 'title',
}
const data= [
    // { id: "0", key: "0", type: 'menu', title: "系统主页",

    {
        id: "1",
        key: "1",
        type: "menu",
        title: "组织管理",
        permissionName: "organization:view",
        icon: "",
        children: [
            {
                id: "1-1", key: "1-1", type: 'menu', title: "用户管理",
                path: "/nav/users",
                permissionName: "user:view",
                children: [
                    {
                        id: "1-1-1", key: "1-1-1", type:
                            "permission", title: "新增用户", permissionName: "user:add"
                    },
                    {
                        id: "1-1-2", key: "1-1-2", type:
                            "permission", title: "删除用户", permissionName: "user:del"
                    },
                    {
                        id: "1-1-3", key: "1-1-3", type:
                            "permission", title: "编辑用户", permissionName: "user:edit"
                    },
                ]
            },
            {
                id: "1-2", key: "1-2", type: 'menu', title: "角色管理",
                path: '/nav/roles', permissionName: "role:view"
            },
            {
                id: "1-3", key: "1-3", type: 'menu', title: "菜单管理",
                path: '/nav/menus', permissionName: "menu:view"
            },
        ]
    },
    {
        id: "2",
        key: "2",
        type: "menu",
        title: "靶场管理",
        permissionName: "labManage:view",
        icon: "",
        children: [
            {
                id: "2-1", key: "2-1", type: 'menu', title: "靶场列表",
                path: '/nav/labsList', permissionName: "lab:view",
                children: [
                    {
                        id: "2-1-1", key: "2-1-1", type: "permission",
                        title: "新增靶场", permissionName: "lab:add"
                    },
                    {
                        id: "2-1-2", key: "2-1-2", type: "permission",
                        title: "删除靶场", permissionName: "lab:del"
                    },
                    {
                        id: "2-1-3", key: "2-1-3", type: "permission",
                        title: "编辑靶场", permissionName: "lab:edit"
                    },
                ]
            }
        ]
    },
]
// 关闭前的回调
function handleClose(done:any){
    cancelForm()
    done()
}
function add(a:any){
dynamicValidateForm.manage=a.title
}
</script>

<style lang='less' scoped></style>